@import "../../common/base.less";
@import "../../common/normalize.less";

.clearfix {
    zoom: 1
}

.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both
}

.gameLogout {
    width: 100%;
    .px2rem(padding-bottom, 100);
    position: relative;
    background:#E0E3E8;
    .gameLogoutMain {
        .px2rem(width,
        1200);
        height: 100%;
        margin: 0 auto;
        .centerTop {
            .px2rem(width,
            1200);
            .px2rem(height,
            400);
            .px2rem(margin-bottom,
            30);
            .px2rem(margin-top, 80);
            .centerTopL {
                .px2rem(width,
                270);
                .px2rem(height,
                400);
                border: 1px solid #CFD2D7;
                float: left;
                .userInfo {
                    width: 100%;
                    .px2rem(height,
                    134);
                    overflow: hidden;
                    border-bottom: 1px solid #CFD2D7;
                    .userInfoImg {
                        .px2rem(width,
                        100);
                        .px2rem(height,
                        100);
                        .px2rem(margin-top,
                        16);
                        .px2rem(margin-left,
                        16);
                        .px2rem(border-radius,
                        50);

                        float: left;
                        img {
                            width: 100%;
                            height: 100%;
                            .px2rem(border-radius,
                            50);
                        }
                    }
                    .userInfoName {
                        float: right;
                        .px2rem(width,
                        140);
                        height: 100%;
                        .name {
                            .px2rem(width,
                            127);
                            margin: 0 auto;
                            .px2rem(font-size,
                            18);
                            color: #000;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            .px2rem(margin-top,
                            30);
                            .px2rem(margin-bottom,
                            10);
                        }
                        .logout {
                            .px2rem(width,
                            60);
                            .px2rem(height,
                            24);
                            .px2rem(line-height,
                            20);
                            .px2rem(border-radius,
                            10);
                            .px2rem(font-size,
                            14);
                            .px2rem(margin-left,
                            16);
                            padding: 0;
                            text-align: center;
                            color: #B12D44;
                            border: 1px solid #B12D44;
                        }
                        .logout:hover{
                            background: #B12D44;
                            color: #fff;
                        }
                    }
                }

                .myGameList {
                    width: 100%;
                    .px2rem(height,
                    260);
                    .px2rem(font-size,
                    14);

                    .title {
                        .px2rem(height,
                        58);
                        .px2rem(line-height,
                        58);
                        .px2rem(font-size,
                        18);
                        color: #fff;
                        text-align: left;
                        .px2rem(text-indent,
                        20);
                    }
                    .userInfo {
                        .px2rem(height,96);
                        border-bottom: none;
                            .itemName {
                                .px2rem(width, 110);
                                .px2rem(height, 38);
                                .px2rem(line-height, 38);
                                .px2rem(margin-left,18);
                                .px2rem(margin-top,25);
                                text-align: center;
                                background: #B12D44;
                                color: #fff;
                                float: left;
                                .px2rem(border-radius,5);
                                .px2rem(font-size,12);
                            }
                            .itemName:hover{
                                background: #7f1f30;
                            }

                            .itemNum {
                                .px2rem(font-size,12);
                                .px2rem(width, 110);
                                .px2rem(height, 38);
                                .px2rem(line-height, 38);
                                text-align: center;
                                background: #B12D44;
                                color: #fff;
                                float: left;
                                .px2rem(margin-left,10);
                                .px2rem(margin-top,25);
                                .px2rem(border-radius,5);


                            }
                             .itemNum:hover{
                                background: #7f1f30;
                            }
                        }


                    .dataList {
                        .px2rem(width, 270);
                        .px2rem(height, 58);
                        .dataItemOne:hover{
                            border-bottom: none;
                            box-shadow: 0px 5px 5px -5px black;
                            border: none;
                        }
                        .dataItem {
                            display: block;
                            .px2rem(width, 270);
                            border-bottom: 1px solid #CFD2D7;
                            .px2rem(height,
                            60);
                            .px2rem(line-height,
                            60);
                            color: #707B84;
                            text-align: center;
                            div {
                                float: left;
                            }
                            .itemName {
                                height: 100%;
                                width: 50%;
                                .px2rem(line-height,
                                60);
                                text-align: center;
                                .px2rem(font-size,
                                14);
                                overflow: hidden;
                            }
                            .itemNum {
                                height: 100%;
                                width: 48%;
                                  .px2rem(line-height,
                                60);
                                .px2rem(font-size,
                                14);
                                color: #707B84;
                                text-align: center;
                                overflow: hidden;
                            }
                            .itemStart {
                                .px2rem(width, 90);
                                float: right;
                                .px2rem(height,
                                26);
                                .px2rem(line-height,
                                26);
                                .px2rem(border-radius,
                                13);
                                background: #B12D44;
                                .px2rem(margin-top,
                                16);
                                float: right;
                                text-align: center;
                                color: #fff;
                                .px2rem(font-size,
                                14);
                                .px2rem(margin-right,
                                25);
                                display: none;
                            }
                        }
                        .dataItem:hover{
                            border-bottom: none;
                            box-shadow: 0px 5px 5px -5px black;
                        }
                        
                    }
                }
                .userTitle {
                    .px2rem(width,
                    175);
                    .px2rem(height,
                    175);
                    .px2rem(border-radius,
                    88);

                    margin: 0 auto;
                    .px2rem(margin-top,
                    60);
                    .px2rem(margin-bottom,
                    30);
                    img {
                        width: 100%;
                        height: 100%;
                        .px2rem(border-radius,
                        88);
                    }
                }
                .goLogin {
                    display: block;
                    .px2rem(width,
                    172);
                    .px2rem(height,
                    52);
                    .px2rem(font-size,
                    18);
                    .px2rem(line-height,
                    48);
                    .px2rem(border-radius,
                    26);
                    border: 1px solid #B12D44;
                    color: #7D8993;
                    margin: 0 auto;
                    text-align: center;
                }
                
                .goLogin:hover {
                    border: 1px solid #7D8993;
                    color: #B12D44;
                }
                p {
                    width: 100%;
                    .px2rem(height,
                    22);
                    .px2rem(line-height,
                    22);
                    .px2rem(font-size,
                    10);
                    .px2rem(margin-top,
                    15);
                    .px2rem(font-size, 14);
                    color: #7D8993;
                    text-align: center;
                }
            }
            .centerTopR {
                .px2rem(width,
                900);
                height: 100%;
                float: right;
            }
        }

        .reGame {
            width: 100%;
            .px2rem(height,
            420);
            .px2rem(margin-bottom,
            30);
            position: relative;
            .moreGame {
                display: block;
                .px2rem(width,
                80);
                .px2rem(height,
                30);
                .px2rem(line-height,
                28);
                .px2rem(border-radius,
                15);
                position: absolute;
                .px2rem(top,
                5);
                right: 0;
                text-align: center;
                border:1px solid #B12D44;
                color: #B12D44;
                .px2rem(font-size,
                14);
                background: rgba(207, 210, 215, 0.2)
            }
            .moreGame:hover {
                background: #B12D44;
                color: #fff;
            }

            .gameList {
                width: 100%;
                height: auto;
                word-wrap: break-word;
                overflow: hidden;
                .gameListMain {
                    .px2rem(width,
                    1300);
                    height: 100%;

                    position: relative;
                    .px2rem(left,
                    -20);
                    .gameItem {
                        .px2rem(width,
                        270);
                        .px2rem(height,
                        360);
                        float: left;
                        .px2rem(margin-left,
                        20);
                        .px2rem(margin-right,
                        20);
                      

                    }

                    
                    .gameItem .itemImg .gameInC:hover .gameIn {
                        background: url("../../../static/img/hover.png");
                        background-size: 100% 100%;
                    }
                    .gameItem .itemImg .gameCC:hover .gameC {
                        background: url("../../../static/img/dataF.png");
                        background-size: 100% 100%;
                    }
                    
                    .gameItem:hover .itemStart{
                       box-shadow: 5px 0px 5px -5px #000;
                    }
                    .itemImg {
                        width: 100%;
                        position: relative;
                        overflow: hidden;
                        .px2rem(height,
                        305);
                        img {
                            width: 100%;
                            .px2rem(height,
                            305);
                            transition: all 0.5s ease 0s;
                        }
                        img:hover {

                            transform: scale(1.2);
                        }
                        .itemStart {
                            width: 100%;
                            .px2rem(height,
                            32);
                            position: absolute;
                            left: 0;
                            bottom: 0;

                            background: rgba(0, 0, 0, 0.6);
                            text-align: center;
                            .px2rem(line-height,
                            32);
                            color: #fff;
                            span,
                            a {
                                display: inline-block;
                                .px2rem(font-size,
                                16);
                                float: left;
                            }

                            .gameIn {

                                .px2rem(width,
                                20);
                                .px2rem(height,
                                20);
                                .px2rem(margin-top,
                                6);
                                .px2rem(margin-left,
                                15);
                                .px2rem(margin-right,
                                10);
                                background: url("../../../static/img/newicon_gameIn.png");
                                background-size: 100% 100%;
                            }
                            .gameC {
                                .px2rem(margin-left,
                                10);
                                .px2rem(width,
                                20);
                                .px2rem(height,
                                20);
                                .px2rem(margin-top,
                                6);
                                .px2rem(margin-left,
                                15);
                                .px2rem(margin-right,
                                10);
                                background: url("../../../static/img/icon_gameC.png");
                                background-size: 100% 100%;
                                .px2rem(margin-left,
                                60);
                            }
                        }
                    }
                    .itemName {
                        .px2rem(width,
                        270);
                        .px2rem(height,
                        55);
                        .px2rem(font-size,
                        18);
                        .px2rem(line-height,
                        55);
                        .px2rem(text-indent,
                        10);
                        color: #7D8993;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: left;
                       border:1px solid #ccc;
                       border-top: none;
                    }
                }
            }
        }
        .dataListGame {
            width: 100%;
            .px2rem(height,
            675);
        }
        .dataListL {
            float: left;
            height: 100%;
            .px2rem(width,
            270);
            .list {
                .px2rem(width,
                270);

                overflow: hidden;
                .dataSevList {
                    .px2rem(width,
                    270);
                    .px2rem(height,
                    630);
                    .px2rem(margin-top,
                    20);
                    border:1px solid #CFD2D7;
                    .listTitle {
                        width: 100%;
                        .px2rem(height,
                        58);
                        .px2rem(line-height,
                        58);
                        .px2rem(font-size,
                        18);
                        color: #000000;
                        font-weight: 600;
                        position: relative;

                        div {
                            float: left;

                        }
                        .one {
                            .px2rem(width,
                            115);
                            height: 100%;
                            text-align: center;
                            overflow: hidden;
                            float: left;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                        .two {
                            .px2rem(width,
                            60);
                            height: 100%;
                            position: absolute;
                            .px2rem(left,
                            110);
                            top: 0;
                            text-align: center;
                            overflow: hidden;
                            word-wrap: break-word;
                        }
                        .three {
                            .px2rem(width,
                            95);
                            position: absolute;
                            .px2rem(left,
                            170);
                            top: 0;
                            height: 100%;
                            float: left;
                            text-align: center;
                            overflow: hidden;
                        }
                    }
                    .swiperList {
                        .px2rem(width,
                        270);
                        .px2rem(height,
                        560);

                        .slider {
                            .px2rem(width,
                            270);
                            .px2rem(height,
                            560);
                            position: relative;
                            .noSerData {
                                .px2rem(width,
                                218);
                                .px2rem(height,
                                203);
                                background: url("https://app.caizhanbao.cn/detault/3.png");
                                background-size: 100% 100%;
                                margin: 0 auto;
                                .px2rem(margin-top,
                                110);
                            }
                            .carousel {
                                .px2rem(width,
                                270);
                                .px2rem(height,
                                560);

                                .carousel-inner {
                                    .item {
                                        .px2rem(width,
                                        270);
                                        .px2rem(height,
                                        560); // 这里是服务器列表的样式
                                        // ul的样式 一会样放在轮播图item下面

                                        .allData {
                                            .px2rem(width,
                                            270);
                                            .px2rem(height,
                                            560);
                                            a {
                                                display: block;
                                                .px2rem(width,
                                                270);
                                                .px2rem(height,
                                                50);
                                                .px2rem(font-size,
                                                14);
                                            }

                                            a:hover {
                                                background: rgba(0, 0, 0, 0.35);
                                            }
                                            a:hover li div {
                                                color: #B12D44;
                                            }

                                            li {
                                                color: #f6f5f8;
                                                width: 100%;
                                                .px2rem(height,
                                                50);
                                                .px2rem(line-height,
                                                50);
                                                .px2rem(font-size,
                                                14);
                                                color: #707B84;
                                                div {
                                                    float: left;
                                                }
                                                .one {
                                                    .px2rem(width,
                                                    115);
                                                    text-align: center;
                                                    overflow: hidden;
                                                    .px2rem(font-size,
                                                    14);
                                                }
                                                .two {
                                                    .px2rem(width,
                                                    95);
                                                    text-align: center;
                                                    overflow: hidden;
                                                    .px2rem(margin-left,
                                                    -20);
                                                    .px2rem(font-size,
                                                    14);
                                                }
                                                .three {
                                                    .px2rem(width,
                                                    60);
                                                    text-align: center;
                                                    overflow: hidden;
                                                    display: block;
                                                    .px2rem(font-size,
                                                    14);
                                                }
                                                .startGame {
                                                    .px2rem(width,
                                                    75);
                                                    .px2rem(height,
                                                    26);
                                                    .px2rem(line-height,
                                                    26);
                                                    .px2rem(margin-top,
                                                    13);
                                                    .px2rem(margin-left,
                                                    -3);
                                                    text-align: center;
                                                    overflow: hidden;
                                                    background: #B12D44;
                                                    .px2rem(border-radius,
                                                    13);
                                                    .px2rem(font-size,
                                                    14);
                                                    display: none;
                                                }
                                            }
                                        }
                                    }
                                } // 轮播图图标的样式
                                .carousel-indicators {
                                    .px2rem(bottom,
                                    0);
                                    position: absolute;
                                    left: 50%;
                                    transform: translateX(-50%);

                                    li {
                                        .px2rem(width,
                                        10);
                                        .px2rem(height,
                                        10);
                                        .px2rem(margin-left,
                                        3);
                                        .px2rem(margin-right,
                                        3);
                                        background: #383838;
                                        border: none;
                                    }
                                    .active {
                                        .px2rem(width,
                                        10);
                                        position: relative;
                                        background: #B12D44;
                                        margin: none;
                                    }
                                }

                                .carousel-control {
                                    // 控制上下样式
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
        .dataListR {
            float: right;
            height: 100%;
            .px2rem(width,
            890);
            position: relative;
            .moreGame {
                display: block;
                .px2rem(width,
                80);
                .px2rem(height,
                30);
                .px2rem(line-height,
                28);
                .px2rem(border-radius,
                15);
                position: absolute;
                .px2rem(top,
                5);
                border:1px solid #B12D44;
                right: 0;
                text-align: center;
                color: #B12D44;
                .px2rem(font-size,
                14);
                background: rgba(207, 210, 215, 0.2)
            }
            .moreGame:hover {
                background: #B12D44;
                color: #fff;
            }
            .imgList {
                .px2rem(width,
                890);
                .px2rem(height,
                257);

                overflow: hidden;
                .imgOver {
                    .px2rem(height,
                    257);
                    .px2rem(width,
                    960);
                    position: relative;
                    .px2rem(left,
                    -20);
                    .gameItem {
                        .px2rem(width,
                        270);
                        .px2rem(height,
                        257);
                        float: left;

                        .px2rem(margin-left,
                        20);
                        .px2rem(margin-right,
                        20);
                        background: rgba(0, 0, 0, 0.2);
                    }
                    .gameItem .itemImg .gameInC:hover .gameIn {
                        background: url("../../../static/img/hover.png");
                        background-size: 100% 100%;
                    }
                    .gameItem:hover .itemImg .gameCC:hover .gameC {
                        background: url("../../../static/img/dataF.png");
                        background-size: 100% 100%;
                    }

                    .itemImg {
                        width: 100%;
                        position: relative;
                        overflow: hidden;
                        .px2rem(height,
                        200);



                        img {
                            width: 100%;
                            .px2rem(height,
                            200);
                            transition: all 0.5s ease 0s;
                        }

                        img:hover {

                            transform: scale(1.2);
                        }

                        .itemStart {
                            width: 100%;
                            .px2rem(height,
                            32);
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            background: rgba(38, 31, 100, 0.35);
                            text-align: center;
                            .px2rem(line-height,
                            32);
                            color: #fff;
                            span,
                            a {
                                display: inline-block;
                                .px2rem(font-size,
                                16);
                                float: left;
                            }


                            .gameIn {

                                .px2rem(width,
                                20);
                                .px2rem(height,
                                20);
                                .px2rem(margin-top,
                                6);
                                .px2rem(margin-left,
                                15);
                                .px2rem(margin-right,
                                10);
                                background: url("../../../static/img/newicon_gameIn.png");
                                background-size: 100% 100%;
                            }
                            .gameC {
                                .px2rem(width,
                                20);
                                .px2rem(height,
                                20);
                                .px2rem(margin-top,
                                6);
                                .px2rem(margin-left,
                                15);
                                .px2rem(margin-right,
                                10);
                                background: url("../../../static/img/icon_gameC.png");
                                background-size: 100% 100%;
                                .px2rem(margin-left,
                                90);
                            }
                        }
                    }
                    .itemName {
                        .px2rem(width,
                        270);
                        .px2rem(height,
                        58);
                        .px2rem(font-size,
                        16);
                        .px2rem(line-height,
                        58);
                        .px2rem(text-indent,
                        20);
                        color: #7D8993;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: left;
                        background:#E0E3E8;
                        border:1px solid #CFD2D7;
                        border-top: none;
                    }
                    .imgListItem {
                        display: block;
                        float: left;
                        .px2rem(width,
                        270);
                        .px2rem(height,
                        120);
                        .px2rem(margin-left,
                        20);
                        .px2rem(margin-right,
                        20);
                        .px2rem(margin-top,
                        15);
                        .px2rem(margin-bottom,
                        15);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .allGame {
                width: 100%;
                .px2rem(height,
                335);
                position: relative;
                .moreGame {
                    display: block;
                    .px2rem(width,
                    80);
                    .px2rem(height,
                    30);
                    .px2rem(line-height,
                    28);
                    .px2rem(border-radius,
                    15);
                    position: absolute;
                    .px2rem(top,
                    5);
                    right: 0;
                    border:1px solid #B12D44;
                    text-align: center;
                    color: #B12D44;
                    .px2rem(font-size,
                    14);
                   background: rgba(207, 210, 215, 0.2)
                }
                .moreGame:hover {
                    background: #B12D44;
                    color: #fff;
                }
                .allGameTitle {
                    width: 100%;
                    .px2rem(height,
                    35);
                    .px2rem(line-height,
                    35);
                    .px2rem(margin-top,
                    24);
                    .px2rem(margin-bottom,
                    10);

                    a {
                        float: left;
                        .px2rem(font-size,
                        24);
                        color: #000;
                        .px2rem(margin-left,
                        25);
                        .px2rem(margin-right,
                        25);
                        .px2rem(line-height,
                        35);
                    }
                    a:first-child {
                        margin-left: 0;
                    }

                    .active {
                        border-bottom: 2px solid #B12D44;
                        color: #B12D44;

                    }
                }

                .gameIconList {
                    width: 100%;
                    overflow: hidden;
                    .px2rem(margin-top,
                    20);
                    .gameIconMove {
                        width: 110%;
                        position: relative;
                        .px2rem(left,
                        -25);
                        .gameIconItem {
                            display: block;
                            .px2rem(width,
                            110);
                            .px2rem(height,
                            126);
                            .px2rem(margin-top,
                            13);
                            .px2rem(margin-bottom,
                            10);
                            .px2rem(margin-left,
                            23);
                            .px2rem(margin-right,
                            23);
                            float: left;
                            .iconImg {
                                .px2rem(width,
                                104);
                                .px2rem(height,
                                104);

                                margin: 0 auto;
                                img {
                                    .px2rem(border-radius,
                                    15);
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            p {
                                width: 100%;
                                .px2rem(height,
                                30);
                                .px2rem(line-height,
                                30);
                                .px2rem(font-size,
                                18);
                                text-align: center;
                                color: #7D8993;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                    .noGame {
                        width: 100%;
                        .px2rem(height,
                        282);
                        background: rgba(0, 0, 0, 0.2);
                        .px2rem(margin-top,
                        20);
                        position: relative;
                        overflow: hidden;
                        .main {
                            .px2rem(width,
                            180);
                            height: 250;
                            margin: 0 auto;
                            .px2rem(margin-top,
                            50);
                            .img {
                                width: 100%;
                                .px2rem(height,
                                126);
                                background: url("../../../static/img/noGameSize.png");
                                background-size: 100% 100%;
                            }
                        }
                        p {
                            .px2rem(width,
                            900);
                            .px2rem(margin-top,
                            30);
                            .px2rem(font-size,
                            20);
                            text-align: center;
                            color: #7D8993;
                        }
                    }
                }
            }
        }
    }
}